<template>
  <div class = "location">
    <div class = "load" v-if = "loading">loading</div>
    <location-header :alphList = "alphList"></location-header>
    <location-list 
    :transitText = "transitText" 
    :hotcityList = "hotcityList"
    :alphList = "alphList"
    ></location-list>
    <location-alphabet 
    @change = "transit" 
    :alphabetList = "alphabetList"
    ></location-alphabet>
  

  </div>
</template>

<script> 
import axios from 'axios'
import locationHeader from './components/locationHeader'
import locationList from './components/locationList'
import locationAlphabet from './components/locationAlphabet'


export default {
  name: 'location',
  components:{
    locationHeader,
    locationList,
    locationAlphabet,
  },
  data(){
    return{
      transitText:'',
      hotcityList:[],
      alphList:[],
      alphabetList:[],
      loading:true,
    }
  },
  methods:{
    transit:function(rel){
      this.transitText = rel
    },
    getLocationData:function(){
      axios.get("/static/mock/location.json")
      .then(this.getLocationDataSucc)
    },
    getLocationDataSucc(res){
      console.log(res)
      res = res.data
      if(res.data){
        this.loading = false
        const data = res.data
        this.hotcityList = data.hotcityList
        this.alphList = data.alphList
        this.alphabetList = data.alphabetList
      }
    }
  },
  mounted(){
    this.getLocationData()
  }
 
}
</script>

<style lang = "stylus" scoped>
.load
  width:1.5rem
  height:.5rem
  background:#000
  opacity:.3
  color:#fff
  position:absolute
  top:5.5rem
  left:2.5rem
  z-index:1011
  text-align:center
  line-height:.5rem
</style>
